<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户统计</title>
    <%@include file="/WEB-INF/layouts/index-header.jsp" %>
    <script src="${staticPath}/commons/echarts/echarts.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row" style="padding:15px;">
        <div id="tool">
            <form id="searchForm" class="form-inline">
                <div class="form-group">
                    <label class="">App类型：</label>
                    <select class="form-control" id="appType">
                        <option value=" ">全部</option>
                        <c:forEach items="${apps}" var="app">
                            <c:choose>
                                <c:when test="${app eq 'Baby'}">
                                    <option value="${app}">时刻小宝</option>
                                </c:when>
                                <c:when test="${app eq 'XiaoWeiShi'}">
                                    <option value="${app}">时刻小卫士</option>
                                </c:when>
                                <c:otherwise>
                                    <option value="${app}">默认应用</option>
                                </c:otherwise>
                            </c:choose>
                        </c:forEach>
                    </select>
                </div>
                <div class="form-group">
                    <label class="">时间段：</label>
                    <input class="t-datetimepicker form-control" id="startTime" value="${startDate}"/> -
                    <input class="t-datetimepicker form-control" id="endTime" value="${endDate}"/>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-primary radius" onclick="generatingChart()">
                        生成
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="onlineAccount" style="width: 100%;height:350px;padding-top: 30px"></div>
</div>

<div class="container-fluid hidden-xs">
    <h4 style="text-align: center;padding-bottom: 20px;font-weight: bold;color: #262626" id="onlineTitle">活跃用户详情</h4>
    <table id="online"></table>
</div>
<div class="container-fluid hidden-xs">
    <h4 style="text-align: center;padding-bottom: 20px;font-weight: bold;color: #262626" id="offlineTitle">僵尸用户详情</h4>
    <table id="offline"></table>
</div>
</div>
<script type="text/javascript">
    window.parent.changeTitle('用户统计');
    var myChart;
    var myTableTitle;
    $(function () {
        $('.t-datetimepicker').datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            format: "yyyy-mm-dd",
            minView: 3
        });
        var mainHeight = $(window).height() * 0.8;
        $('#onlineAccount').height(mainHeight < 350 ? 350 : mainHeight);
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('onlineAccount'));
        getData('${ctx}/admin/report/getOnlineAccountsCount');
        myChart.on('click', function (param) {
            window.location.href = "#online";
        });
        initOnlineTable("", "", "online", $('#appType').val());
        initOfflineTable("", "", "offline", $('#appType').val());
    });

    function getData(url) {
        $.get(url, function (resp) {
            var option = {
                title: {
                    text: resp.body.title,
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    data: resp.body.legendData
                },
                series: [{
                    name: '用户',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '55%'],
                    data: resp.body.appData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            formatter: '{b} : {c} ({d}%)'
                        },

                    },
                    color: [
                        '#46d185',
                        '#2F4554',
                    ],
                }],
            };
            myChart.setOption(option);
        }, 'json');
    }

    function initOnlineTable(start, end, type, appType) {
        $('#online').bootstrapTable('destroy').bootstrapTable({
            url: '${ctx}/admin/app-user/OnlineAccountPageList?startDate=' + start + "&endDate=" + end + "&type=" + type + '&appType=' + appType,
            idField: 'id',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 15,
            sidePagination: 'server',
            uniqueId: 'id',
            mobileResponsive: true,
            checkbox: true,
            clickToSelect: true,
            queryParams: queryParams,
            responseHandler: responseHandler,
            columns: [
                {
                    title: '#',
                    width: 50,
                    align: 'center',
                    formatter: snFormatter
                },
                {
                    field: 'username',
                    title: '用户名',
                    align: 'center'
                },
                {
                    field: 'realName',
                    title: '真实姓名',
                    align: 'center'
                },
                {
                    field: 'tel',
                    title: '电话',
                    align: 'center'
                },
                {
                    field: 'email',
                    title: '邮箱',
                    align: 'center'
                },
                {
                    field: 'gender',
                    title: '性别',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value === 'Male') {
                            return "男";
                        } else if (value === 'Female') {
                            return "女";
                        } else {
                            return "未知";
                        }
                    }
                },
                {
                    field: 'role',
                    title: '角色',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value === 'Admin') {
                            return "管理员";
                        } else {
                            return "普通用户";
                        }
                    }
                }]
        });
    }

    function initOfflineTable(start, end, type, appType) {
        $('#offline').bootstrapTable('destroy').bootstrapTable({
            url: '${ctx}/admin/app-user/OnlineAccountPageList?startDate=' + start + "&endDate=" + end + "&type=" + type + '&appType=' + appType,
            idField: 'id',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 15,
            sidePagination: 'server',
            uniqueId: 'id',
            mobileResponsive: true,
            checkbox: true,
            clickToSelect: true,
            queryParams: queryParams,
            responseHandler: responseHandler,
            columns: [
                {
                    title: '#',
                    width: 50,
                    align: 'center',
                    formatter: snFormatter
                },
                {
                    field: 'username',
                    title: '用户名',
                    align: 'center'
                },
                {
                    field: 'realName',
                    title: '真实姓名',
                    align: 'center'
                },
                {
                    field: 'tel',
                    title: '电话',
                    align: 'center'
                },
                {
                    field: 'email',
                    title: '邮箱',
                    align: 'center'
                },
                {
                    field: 'gender',
                    title: '性别',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value === 'Male') {
                            return "男";
                        } else if (value === 'Female') {
                            return "女";
                        } else {
                            return "未知";
                        }
                    }
                },
                {
                    field: 'role',
                    title: '角色',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value === 'Admin') {
                            return "管理员";
                        } else {
                            return "普通用户";
                        }
                    }
                }]
        });
    }

    function generatingChart() {
        getData('${ctx}/admin/report/getOnlineAccountsCount?startTime=' + $('#startTime').val() + '&endTime=' + $('#endTime').val() + '&appType=' + $('#appType').val());
        $('#tableTitle').text(myTableTitle + " 新用户详情");
        initOnlineTable($('#startTime').val(), $('#endTime').val(), "online", $('#appType').val());
        initOfflineTable($('#startTime').val(), $('#endTime').val(), "offline", $('#appType').val());
    }

</script>
</body>
</html>